<template>
	<view class="my-account">
		<!--账户信息面板-->
		<view class="header" :class="'bg-' + themeColor.name">
			<view class="account">
				<view class="assets">
					<view>余额(元)</view>
					<view class="money">
						{{
							(userInfo && userInfo.balance ) ||
								'0.00'
						}}
					</view>
				</view>
				<text @tap="navTo('/pages/user/shop/recharge')" class="recharge"
					:class="'text-' + themeColor.name">充值</text>
			</view>
			<view class="cumulative">
				<view class="item">
					<view>可提现金额(元)</view>
					<view class="money">
						{{
							(userInfo &&
								userInfo.commission) ||
								'0.00'
						}}
					</view>
				</view>
				<!-- <view class="item">
					<view>冻结押金(元)</view>
					<view class="money">
						{{
							(
								userInfo &&
								userInfo.deposit
							) || '0.00'
						}}
					</view>
				</view> -->
			</view>
		</view>

		<view class="account-bill">
			<!--顶部账单类型 全部/充值/消费-->
			<view class="navbar">
				<view v-for="(item, index) in billTypeList" :key="index" class="nav-item"
					:class="tabCurrentIndex === index ? `text-${themeColor.name} current` : ''"
					@tap="tabClick(index, item.state)">
					{{ item.text }}
				</view>
			</view>
			<!--账单明细列表-->
			<view class="rf-bill-list" v-if="integralList.length > 0">
				<view class="rf-list-item" v-for="(item, index) in integralList" :key="index">
					<view class="mid">
						<view class="title">
							{{ item.remark }}
						</view>
						<view class="time">
							{{ item.createTime }}
						</view>
					</view>
					<view class="right">
						<text class="change-num" :class="
								(item.transType == 2 || item.transType == 5 || item.transType == 6) ? 'change-num-reduce' : 'change-num-add'
							">{{ item.money }}
						</text>
					</view>
				</view>
				<rf-load-more class="load-more" :status="loadingType" v-if="integralList.length > 0"></rf-load-more>
			</view>
			<rf-empty :info="'暂无账单记录'" v-if="integralList.length === 0 && !loading"></rf-empty>
			<!--加载动画-->

		</view>
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>
<script>
	/**
	 * @des 用户账户中心
	 *
	 * @author stav stavyan@qq.com
	 * @date 2020-01-10 15:17
	 * @copyright 2019
	 */
	import {
		creditsLogList
	} from '@/api/userInfo';
	import {
		memberInfo
	} from '@/api/userInfo';
	import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
	export default {
		components: {
			rfLoadMore
		},
		data() {
			return {
				userInfo: {},
				loading: true,
				tabCurrentIndex: 0,
				isOpenRecharge: this.$mSettingConfig.isOpenRecharge,
				navList: [{
						title: '账单记录',
						icon: 'icondaifukuan',
						url: '/pages/user/shop/storebill'
					},
					// {
					// 	title: '充值记录',
					// 	icon: 'iconchongzhijilu',
					// 	url: '/pages/user/account/bill?state=2'
					// },
					// {
					// 	title: '消费记录',
					// 	icon: 'iconzuheduozhongxiaofeifangshizuhexiaofei',
					// 	url: '/pages/user/account/bill?state=3'
					// },
					// {
					// 	title: '红包中心',
					// 	icon: 'iconjifenqia',
					// 	url: '/pages/user/account/integral'
					// },
					// {
					// 	title: '提现',
					// 	icon: 'iconchongzhijilu',
					// 	url: '/pages/user/shop/with?type=2'
					// },
					// {
					// 	title: '押金转余额',
					// 	icon: 'iconzuheduozhongxiaofeifangshizuhexiaofei',
					// 	url: 'money'
					// }
				],
				billTypeList: [{
						state: 1,
						text: '全部'
					},
					{
						state: 2,
						text: '收入'
					},
					{
						state: 3,
						text: '消费'
					}
				],
				integralList: [],
				loadingType: 'more',
				pageNum: 0
			};
		},
		onShow() {
			this.initData();
		},
		onLoad(options) {
			this.getIntegralListList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 0;
			this.integralList = [];
			this.getIntegralListList('refresh');
		},
		// 加载更多
		onReachBottom() {
			if (this.loadingType === 'nomore') return;
			this.pageNum++
			this.getIntegralListList();
		},
		methods: {
			// 顶部tab点击
			tabClick(index, state) {
				this.pageNum = 0;
				this.integralList.length = 0;
				this.loading = true;
				this.tabCurrentIndex = index;
				this.state = state;
				this.getIntegralListList();
			},
			// 初始化数据
			initData() {
				this.getMemberInfo();
			},
			async getIntegralListList(type) {
				const params = {};
				params.filterType = 1;
				if (this.state === 2) {
					params.filterType = 2;
				} else if (this.state === 3) {
					params.filterType = 3;
				}
				params.pageNum = this.pageNum;
				params.source = '1';
				await this.$http
					.get(`${creditsLogList}`, {
						...params
					})
					.then(r => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						if (r.list) {
							this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
							this.integralList = [...this.integralList, ...r.list];
						}
					})
					.catch(() => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
					});
			},
			// 获取用户信息
			async getMemberInfo() {
				this.$http.get(memberInfo).then(async res => {
					this.loading = false;
					let storeId = res.storeId;
					this.storeId = storeId + '';
					this.$http.get('/store/TStoreInfo/querystoreinfo?storeId=' + storeId).then(r => {

						this.userInfo = r || {};
						if (r.customerId != res.id) {
							this.num = 2
						}
						this.userInfo.qrcode = res.qrcode;
					});

				}).catch(() => {

					this.loading = false;
				});
			},
			navTo(route) {
				if (route == 'money') {
					uni.showModal({
						content: '是否确认转余额?',
						success: e => {
							if (e.confirm) {

								this.$http
									.get(`/depositByBalance`, {

									})
									.then(() => {
										this.btnLoading = false;
										this.$mHelper.toast('操作成功！');
										this.$mRouter.back();
									})
									.catch(() => {
										this.btnLoading = false;
									});

							}
						}

					});
				} else {
					this.$mRouter.push({
						route
					});
				}
			}
		}
	};
</script>
<style scoped lang="scss">
	page {
		background-color: $color-white;
	}

	.my-account {
		background-color: $color-white;
		/*  #ifndef H5  */
		height: 100vh;
		/*  #endif  */
		padding: 32upx 20upx;
		width: 100%;

		.header {
			padding: 30upx;
			height: 320upx;
			opacity: 0.9;
			border-radius: 20upx;
			color: rgba(255, 255, 255, 0.6);
			font-size: $font-sm;
			position: relative;

			.account {
				width: calc(100% - 60upx);
				display: flex;
				position: absolute;
				z-index: 2;
				justify-content: space-between;

				.assets {
					.money {
						color: #fff;
						font-size: $font-lg + 10upx;
						margin: 0;
					}
				}

				.recharge {
					font-size: $font-base;
					width: 150upx;
					height: 54upx;
					line-height: 54upx;
					border-radius: $font-base;
					background-color: #fff9f8;
					text-align: center;
					margin-top: 10upx;
				}
			}

			.cumulative {
				width: calc(100% - 240upx);
				position: absolute;
				bottom: 20upx;
				display: flex;
				justify-content: space-between;

				.money {
					color: #fff;
					font-size: $font-lg + 4upx;
					margin: 0;
				}
			}

			.header-bg {
				position: absolute;
				width: 100%;
				height: 320upx;
				z-index: 1;
				top: 0;

				image {
					width: 100%;
					height: 320upx;
				}
			}
		}

		.nav {
			border-bottom: 1px solid #f5f5f5;
			display: flex;

			.item {
				flex: 1;
				margin: 20upx;
				font-size: $font-base - 4upx;
				display: inline-block;
				text-align: center;
				color: #999;

				.iconfont {
					display: block;
					margin: 0 auto;
					font-size: $font-lg + 20upx;
				}
			}
		}

		.advert {
			display: flex;

			.item {
				flex: 1;
				border-radius: 24upx;
				padding: 10upx 0;
				margin: 20upx 10upx;
				display: flex;
				justify-content: space-between;

				.iconfont {
					font-size: $font-lg + 20upx;
					margin-right: 20upx;
				}

				.text {
					margin-left: 20upx;

					.name {
						font-size: $font-base;
						font-weight: bold;
						height: 40upx;
					}

					.desc {
						font-size: $font-sm - 2upx;
					}
				}
			}

			.on {
				background-color: #fff3f3;
			}
		}
	}

	.account-bill {
		.rf-bill-list {
			.rf-list-item {
				background-color: $color-white;
				padding: $spacing-base $spacing-lg;
				border: 1upx solid rgba(0, 0, 0, .02);
				display: flex;
				justify-content: space-between;
				align-items: center;

				.mid {
					text-align: left;

					.title {
						margin-top: 10upx;
						font-size: $font-base + 2upx;
						color: $font-color-dark;
					}

					.time {
						margin-top: 10upx;
						font-size: $font-base;
						margin-left: $spacing-sm;
						color: $font-color-light;
					}
				}

				.right {
					.change-num {
						font-size: $font-lg + 4upx;
						color: $font-color-base;
					}

					.change-num-add {
						color: #16ac57;
					}

					.change-num-reduce {
						color: #fc4141;
					}
				}
			}
		}
	}
</style>